<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            padding-top: 15px;
        }
    </style>
</head>

<body>


    <div class="container">

        <div class="panel panel-default">
            <div class="panel-body">
                <div role="form">
                    <div class="form-group">
                        <label for="">用户名</label>
                        <input type="text" class="form-control" id="id" placeholder="请输入用户名">
                        <label for="">密码</label>
                        <input type="password" class="form-control" id="password" placeholder="请输入密码">
                    </div>
                    <button onclick="loginEvt()" class="btn btn-primary">登录</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function loginEvt() {
            //先实例化一个xhr
            const xhr = new XMLHttpRequest()
            //打开连接
            xhr.open('GET', './user/login')
            //设置头
            xhr.setRequestHeader('content-Type', 'application/json')
            //监听响应
            xhr.onreadystatechange = function () {
                if (this.readyState === 4) {
                    if (this.status === 200) {
                        console.log(this.responseText)
                    }else{
                        console.log(this.status,this.statusText)
                    }
                }

            }
            //发送请求 和请求数据
            xhr.send()
        }
    </script>
</body>

</html>